<template>
  <div class="page-right" :class="panelCollapse ? 'page-right--collapse' : ''">
    <el-scrollbar height="100%">
      <template v-if="type">
        <!-- name -->
        <div class="name sa-flex">
          <img :src="'./static/images/shop/decorate/' + type + '.png'" />
          <span>{{ compNameObj[type] }}</span>
        </div>
        <!-- data -->
        <el-form :model="rightData" label-width="84px">
          <div class="setting">
            <!-- type==page 不显示/type==tabbar 显示 -->
            <div class="tab">
              <div class="tab-wrap sa-flex">
                <template v-for="ts in tabList">
                  <div
                    v-if="
                      ts.type == 'data' &&
                      !['userCard', 'orderCard', 'walletCard', 'couponCard'].includes(type)
                    "
                    :class="[ts.type, tabType == ts.type ? 'is-active' : '']"
                    @click="tabType = ts.type"
                  >
                    {{ ts.name }}
                  </div>
                  <div
                    v-if="ts.type == 'style' && !['floatMenu', 'popupImage', 'page'].includes(type)"
                    :class="[ts.type, tabType == ts.type ? 'is-active' : '']"
                    @click="tabType = ts.type"
                  >
                    {{ ts.name }}
                  </div>
                  <div
                    v-if="ts.type == 'css'"
                    :class="[ts.type, tabType == ts.type ? 'is-active' : '']"
                    @click="tabType = ts.type"
                  >
                    {{ ts.name }}
                  </div>
                </template>
              </div>
            </div>
            <compSetting
              v-if="tabType == 'data'"
              :type="type"
              :settingData="rightData"
              :tabType="tabType"
              :platformType="platformType"
              :templateDetailType="templateDetailType"
            ></compSetting>
            <template v-if="tabType == 'style' && rightData.style">
              <div class="card">
                <div class="title">组件样式</div>
                <div class="content">
                  <template v-if="rightData.style.background">
                    <el-form-item label="组件背景">
                      <el-radio-group v-model="rightData.style.background.type">
                        <el-radio label="color">纯色</el-radio>
                        <el-radio label="image">图片</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      v-if="rightData.style.background.type == 'color'"
                      label="选择颜色"
                    >
                      <dc-color-picker
                        v-model="rightData.style.background.bgColor"
                      ></dc-color-picker>
                    </el-form-item>
                    <el-form-item
                      v-if="rightData.style.background.type == 'image'"
                      label="选择图片"
                    >
                      <sa-uploader
                        v-model="rightData.style.background.bgImage"
                        fileType="image"
                      ></sa-uploader>
                    </el-form-item>
                  </template>
                  <el-form-item
                    v-if="rightData.style.marginTop || rightData.style.marginTop == 0"
                    label="上间距"
                  >
                    <dc-slider v-model="rightData.style.marginTop"></dc-slider>
                  </el-form-item>
                  <el-form-item
                    v-if="rightData.style.marginRight || rightData.style.marginRight == 0"
                    label="右间距"
                  >
                    <dc-slider v-model="rightData.style.marginRight"></dc-slider>
                  </el-form-item>
                  <el-form-item
                    v-if="rightData.style.marginBottom || rightData.style.marginBottom == 0"
                    label="下间距"
                  >
                    <dc-slider v-model="rightData.style.marginBottom"></dc-slider>
                  </el-form-item>
                  <el-form-item
                    v-if="rightData.style.marginLeft || rightData.style.marginLeft == 0"
                    label="左间距"
                  >
                    <dc-slider v-model="rightData.style.marginLeft"></dc-slider>
                  </el-form-item>
                  <el-form-item
                    v-if="rightData.style.borderRadiusTop || rightData.style.borderRadiusTop == 0"
                    label="上圆角"
                  >
                    <dc-slider v-model="rightData.style.borderRadiusTop"></dc-slider>
                  </el-form-item>
                  <el-form-item
                    v-if="
                      rightData.style.borderRadiusBottom || rightData.style.borderRadiusBottom == 0
                    "
                    label="下圆角"
                  >
                    <dc-slider v-model="rightData.style.borderRadiusBottom"></dc-slider>
                  </el-form-item>
                  <el-form-item
                    v-if="rightData.style.padding || rightData.style.padding == 0"
                    label="内间距"
                  >
                    <dc-slider v-model="rightData.style.padding"></dc-slider>
                  </el-form-item>
                  <el-form-item
                    v-if="rightData.style.height || rightData.style.height == 0"
                    label="高度"
                  >
                    <dc-slider v-model="rightData.style.height" :mult="6"></dc-slider>
                  </el-form-item>
                </div>
              </div>
            </template>
            <template v-if="tabType == 'css'">
              <el-scrollbar class="cssCard">
                <div>{</div>
                <div class="pl-2 sa-flex sa-col-top" v-for="(value, key) in rightData">
                  <div class="cssKey mr-1">{{ key }}:</div>
                  <div v-if="isString(value)" class="cssValue">"{{ value }}",</div>
                  <div v-else class="cssValue">{{ value }},</div>
                </div>
                <div>}</div>
              </el-scrollbar>
            </template>
          </div>
        </el-form>
      </template>
    </el-scrollbar>
    <div
      class="collapse-icon right-close sa-flex sa-row-center"
      @click="emit('update:panelCollapse', !panelCollapse)"
    >
      <el-icon v-if="!panelCollapse">
        <ArrowLeft />
      </el-icon>
      <el-icon v-else>
        <ArrowRight />
      </el-icon>
    </div>
  </div>
</template>
<script setup>
  /**
   * @property {String} type 组件类型
   * @property {Object} rightData 组件数据
   */
  import { ref, watch } from 'vue';
  import { compNameObj } from '../../data';

  import compSetting from './setting.vue';

  import dcColorPicker from '../center/common/dc-color-picker.vue';
  import dcSlider from '../center/common/dc-slider.vue';
  import { isString } from 'lodash';

  const emit = defineEmits(['update:panelCollapse']);
  const props = defineProps([
    'panelCollapse',
    'type',
    'rightData',
    'platformType',
    'templateDetailType',
  ]);

  const tabType = ref(
    ['', 'orderCard', 'walletCard', 'couponCard'].includes(props.type) ? 'style' : 'data',
  );

  const tabList = [
    {
      name: '内容',
      type: 'data',
    },
    {
      name: '样式',
      type: 'style',
    },
    {
      name: '数据',
      type: 'css',
    },
  ];
  watch(
    () => props.type,
    () => {
      tabType.value = ['userCard', 'orderCard', 'walletCard', 'couponCard'].includes(props.type)
        ? 'style'
        : 'data';
    },
  );
</script>

<style lang="scss" scoped>
  .page-right {
    flex-shrink: 0;
    width: 344px;
    height: 100%;
    background: var(--sa-background-assist);
    box-shadow: 0px 0px 0.24rem rgb(0 0 0 / 16%);
    transition: all 0.2s;
    position: relative;
    z-index: 1;

    .name {
      padding: 8px 12px;
      color: var(--sa-subtitle);
      font-size: 14px;

      img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }

    .right-close {
      left: -20px;
      transform: rotate(180deg);
    }

    .cssCard {
      background-color: #1e1e1e !important;
      color: #ccc;
      margin: 0 20px;
      padding: 10px;
      word-break: break-all;
    }

    .cssKey {
      color: #9cdcfe;
      flex-shrink: 0;
    }

    .cssValue {
      color: #ccc;
    }

    &--collapse {
      width: 0;
    }
  }
  @media only screen and (max-width: 768px) {
    .page-right {
      position: absolute !important;
      right: 0;
      z-index: 100;
      transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);

      &--collapse {
        width: 0 !important;
      }
    }
  }
</style>
<style lang="scss">
  @import './setting.scss';
</style>
